<template>
  <div>
      <div class="me">
          <div class="me-1">
              <div></div>
              <div>我的</div>
              <div><img src="https://p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png" alt=""></div>
          </div>
          <div class="me-2"><div><span><svg t="1650963499128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2387" width="48" height="48"><path d="M652.8 534.4C723.2 489.6 768 409.6 768 320c0-140.8-115.2-256-256-256S256 179.2 256 320c0 89.6 44.8 169.6 115.2 214.4C192 592 64 761.6 64 960h64c0-211.2 172.8-384 384-384s384 172.8 384 384h64c0-198.4-128-368-307.2-425.6zM512 512c-105.6 0-192-86.4-192-192s86.4-192 192-192 192 86.4 192 192-86.4 192-192 192z" p-id="2388" fill="#2c2c2c"></path></svg></span></div></div>
      </div>
      <div class="order">
          <div class="order-1"><span>我的订单</span></div>
          <div class="order-2">
              <div>
                  <span><svg t="1650963729300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3781" width="48" height="48"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667a432.554667 432.554667 0 0 1-4.490667 62.112 423.36 423.36 0 0 1-8.789333 43.914667l-0.458667 1.749333-0.330667 1.301333-1.418666 5.216a423.210667 423.210667 0 0 1-9.365334 29.546667l-1.066666 2.944a426.698667 426.698667 0 0 1-94.357334 150.154667c22.986667 3.082667 43.818667 10.837333 62.4 23.466666a32 32 0 1 1-35.957333 52.938667c-30.485333-20.714667-77.781333-18.965333-144.053333 9.386667a343.68 343.68 0 0 1-5.706667 2.773333l-1.834667 0.853333c-1.568 0.746667-3.136 1.472-4.704 2.186667l-0.874666 0.394667c-1.834667 0.832-3.68 1.653333-5.525334 2.453333l-0.778666 0.330667c-1.706667 0.746667-3.413333 1.472-5.12 2.197333-0.533333 0.202667-1.034667 0.416-1.546667 0.629333-3.658667 1.514667-7.349333 2.986667-11.061333 4.394667l-2.250667 0.832a278.826667 278.826667 0 0 1-3.914667 1.450667l-2.453333 0.874666c-1.6 0.576-3.232 1.152-4.853333 1.706667a322.752 322.752 0 0 1-6.08 2.026667l-1.941334 0.618666c-1.781333 0.576-3.573333 1.130667-5.365333 1.685334l-0.693333 0.202666c-1.717333 0.533333-3.445333 1.034667-5.173334 1.536l-2.101333 0.597334c-1.248 0.362667-2.485333 0.704-3.733333 1.045333l-3.082667 0.832c-1.173333 0.32-2.346667 0.629333-3.530667 0.928l-2.922666 0.736c-1.706667 0.426667-3.434667 0.853333-5.162667 1.258667l-1.173333 0.266666c-10.346667 2.410667-20.821333 4.448-31.424 6.08l-2.592 0.394667-0.746667 0.106667A426.250667 426.250667 0 0 1 512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333z m0 522.666667a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m160-160a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m-320 0a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m160-160a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" p-id="3782" fill="#d81e06"></path></svg></span>
                  <p>电影</p>
              </div>
              <div>
                  <span><svg t="1650963994306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5872" width="48" height="48"><path d="M874.8 239.5c0-61.1-50-111.1-111.1-111.1H260.3c-61.1 0-111.1 50-111.1 111.1l-50.5 545c0 61.1 50 111.1 111.1 111.1h604.4c61.1 0 111.1-50 111.1-111.1l-50.5-545zM772.3 349.7c-10.9 60.6-42.1 115.2-88.2 154.3-47.3 40.1-108.4 62.1-172.1 62.1s-124.8-22-172.1-62.1c-46.1-39.1-77.4-93.8-88.3-154.4-15.2-10.1-24.5-27.2-24.5-45.5 0-14.5 5.6-28.1 15.8-38.3s23.8-15.8 38.3-15.8c14.5 0 28.1 5.6 38.3 15.8 10.2 10.2 15.8 23.8 15.8 38.3 0 17-7.9 32.8-21.5 43.2C332.9 438.4 415.4 504 512 504c96.7 0 179.2-65.6 198.1-156.6-13.6-10.4-21.5-26.2-21.5-43.2 0-14.5 5.6-28.1 15.8-38.3 10.2-10.2 23.8-15.8 38.3-15.8s28.1 5.6 38.3 15.8c10.2 10.2 15.8 23.8 15.8 38.3 0 18.8-9.1 35.5-24.5 45.5z" fill="#d81e06" p-id="5873"></path></svg></span>
                  <p>商城</p>
              </div>
          </div>
      </div>
      <div class="cou">
          <div><span>优惠券</span><img src="https://p0.meituan.net/scarlett/70a18c9d3c345f442e5a4e6bf2d16180779.png@80q" alt="" /></div>
          <div><span>折扣卡</span><img src="https://p0.meituan.net/scarlett/70a18c9d3c345f442e5a4e6bf2d16180779.png@80q" alt="" /></div>
      </div>
  </div>
</template>

<script>
export default {
    name:"Personal"
}
</script>

<style lang="less" scoped>
.me{
    background: #d3574d;
    .me-1{
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    div{
        width: 33%;
        text-align: center;
        color: #fff;
        font-size: 20px;
        img{
            width: .2rem;
            height: .2rem;
            margin-left: 70px;
           margin-bottom: 10px;
        }
    }
}
.me-2{
    width: 100%;
    height: 150px;
    position: relative;
    div{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #f5f5f5;
        text-align: center;
        position: absolute;
        top: 30px;
        left: 160px;
        span{
        font-size: 45px;
        color: lightblue;
    }
    }
 }
}
.order{
    width: 100%;
    .order-1{
        width: 100%;
        height: 30px;
        font-size: 16px;
        color: #333;
        text-align: center;
        line-height: 30px;
    }
    .order-2{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div{
            width: 50%;
            height: 130px;
            text-align: center;
            margin-top: 40px;
           span{
               font-size: 40px;
               color: #d3574d;
           }
           p{
               font-size: 16px;
               margin-top: 5px;
           }
        }
    }
}
.cou{
    width: 100%;
    height: 50px;
    div{
        width: 100%;
        height: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        span:nth-child(1){
            margin-left: 15px;
        }
        img{
            width: 13px;
            height: 13px;
        }
    }
}
</style>